window.onload = function () {
    let $bg = document.querySelector('.bg')
    let $drink = document.querySelector('.drink')
    let $eat = document.querySelector('.eat')
    let $cymbal = document.querySelector('.cymbal')
    let $fart = document.querySelector('.fart')
    let $pie = document.querySelector('.pie')
    let $scratch = document.querySelector('.scratch')
    let $music = document.querySelector('.music')
    let $footLeft = document.querySelector('.footLeft')
    let $footRight = document.querySelector('.footRight')
    let $stomatch = document.querySelector('.stomatch')
    let $knockout = document.querySelector('.knockout')
    var time

    let play = function clearTime(path, total, timing) {
        // 防止出现多个动作同时出现
        clearInterval(time)
        let num1 = 0
        let num
        time = setInterval(() => {
            num1++
            if (num1>= 10) {
                num = num1
            } else {
                num = '0' + num1
            }
            $bg.src = `./assets/img/Animations/${path}/${path}_${num}.jpg`
            if (num1 >= total) {
                clearInterval(time)
            }
        }, timing)
    }
    let musicPlay = path => {
        $music.src = './assets/mp3/' + path
        $music.play()
    }

    $drink.onclick = () => play('drink', 80, 50)
    $eat.onclick = () => play('eat', 39, 50)
    // 鼓
    $cymbal.onclick = () => {
        play('cymbal', 12, 100)
        musicPlay('pia.mp3')
    }
    // 放屁
    $fart.onclick = () => {
        play('fart', 27, 100)
        musicPlay('pi.wav')
    }
    // 砸饼
    $pie.onclick = () => play('pie', 23, 100)
    // 抓屏幕
    $scratch.onclick = () => play('scratch', 55, 100)
    $footLeft.onclick = () => {
        play('footLeft', 29, 100)
    }
    $footRight.onclick = () => {
        play('footRight', 29, 100)
    }
    $stomatch.onclick = () => {
        play('stomach', 33, 100)
        musicPlay('tomaiyou.mp3')
    }
    $knockout.onclick = () => {
        play('knockout', 80, 100)
    }

}